<template>
  <page-frame>
    <div class="alarmRecordDetail">
      <div class="toptitle">
        <div class="left">报警记录-详情</div>
        <div class="right">
          <div class="btns">
            <el-button @click="back" >返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-content">
        <!--base info-->
        <el-form label-width="120px" style="width:90%;margin:auto">
          <el-row>
            <el-col :span="12">
              <el-form-item label="报警床位">
                <span v-model="ruleForm.bedNo">{{ruleForm.bedNo}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会员姓名">
                <span v-model="ruleForm.memberName">{{ruleForm.memberName}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="报警类型">
                <span v-model="ruleForm.warnType">{{ruleForm.warnType}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="关联员工">
                <span v-model="ruleForm.relatedMember">{{ruleForm.relatedMember}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="持续时长">
                <span v-model="ruleForm.continueTimes">{{ruleForm.continueTimes}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上报时间">
                <span v-model="ruleForm.reportTime">{{ruleForm.reportTime}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!--follow record-->
        <el-row>
          <div class="contentRecord">
            <div class="panel">
              <div class="panel-title first">
                <el-row :gutter="20">
                  <el-col :span="6">
                    <div class="grid-content bg-purple">跟进记录</div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </el-row>
        <el-form label-width="120px" style="width:90%;margin:auto">
          <div v-for="(item,index) in ruleRecordForm">
            <el-row>
              <el-col :span="12">
                <el-form-item label="处理人">
                  <span v-model="item.handleEmName">{{item.handleEmName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="处理时间">
                  <span v-model="item.handleTime">{{item.handleTime}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否解决">
                  <span v-model="item.isSolved">{{item.isSolved}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="描述">
                  <span v-model="item.handleContent">{{item.handleContent}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="borderT" v-if="index!=ruleRecordForm.length-1&&ruleRecordForm.length!=0"></div>
          </div>
        </el-form>
      </div>
    </div>
  </page-frame>
</template>

<script >
  import bedGuardApi from '../../service/healthManagement/bedGuardApi';
  export default {
    data () {
      return {
        currentRecordId:null,
        ruleForm: {
          bedNo:'',
          memberName:'',
          warnType:null,
          continueTimes:'',
          confirmTime:'',
        },
        ruleRecordForm:[],
      }
    },
    methods: {
      init(){
        this.currentRecordId = this.$route.params.recordId;
        this.getDetailInfo();
      },

      getDetailInfo(){
        let self = this;
        bedGuardApi.getAlarmRecordDetail(this.currentRecordId).then(
          (response)=>{
            self.ruleForm = response.data.data;
            self.ruleRecordForm = response.data.data.deviceHandleRecordDtoList;
            self.ruleForm.reportTime = self.ruleForm.reportTime.substring(0,16);
            for(var i=0;i<self.ruleRecordForm.length;i++){
              self.ruleRecordForm[i].handleTime = self.ruleRecordForm[i].handleTime.substring(0,16);
            }
          }
        );
      },

      back(){
        this.$router.push({name:'alarmRecord'})
      },
    },
    mounted: function () {
      this.init();
    },
    components:{

    },

  }
</script>
<style>
  .alarmRecordDetail .file-content{
    width:95%;
    margin:50px auto;
  }

  .alarmRecordDetail .el-textarea{
    width:91%!important;
  }

  .alarmRecordDetail .el-form-item__content span,
  .alarmRecordDetail .el-form-item__content .desc{
    color: #48576a;
  }

</style>
